<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/bui.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- 依赖库 手机调试的js引用顺序如下 -->
    <script src="js/zepto.js"></script>
    <!-- 移动端快速点击插件 -->
    <script src="js/plugins/fastclick.js"></script>
    <!-- BUI库 -->
    <script src="js/bui.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        
        bui.ready(function(viewport){
            
        });

    </script>
    <title>登录</title>
</head>

<body>
    <div class="bui-page login">
        <header class="bui-bar">
            <div class="bui-bar-left"></div>
            <div class="bui-bar-main">登录</div>
            <div class="bui-bar-right"></div>
        </header>
        <main>
            <form class="bui-list" id="loginForm" method="post" onsubmit="return false;">
                <div class="bui-btn bui-box clearactive">
                    <label for="username" class="bui-label">账号</label>
                    <div class="span1">
                        <input id="username" name="username" type="text"
                               class="bui-input" value="" placeholder="邮箱/手机号码/昵称" required>
                    </div>
                </div>
                <div class="bui-btn bui-box clearactive">
                    <label for="password" class="bui-label">密码</label>
                    <div class="span1">
                        <input id="password" name="password" type="password"
                               class="bui-input" value="" placeholder="密码" required>
                    </div>
                </div>
<!--                <div class="bui-btn bui-box code-box clearactive">
                    <div class="bui-label">验证码</div>
                    <div class="span1">
                        <input type="text" class="bui-input" value="" placeholder="" maxlength="4">
                    </div>
                    <div class="code-img">
                        <img src="../images/code.png">
                    </div>
                </div>-->
                <div class="bui-btn bui-box status">
                        <input id="rememberMe" name="rememberMe" type="checkbox" class="bui-choose remind">
                        <label for="rememberMe" class="span1">&nbsp;记住登录状态</label>
                </div>
                <div class="container-xy">
                    <input type="submit" class="bui-btn round success bui-align-center" style="width: 100%;"
                           id="login" value="立即登录" onclick="login1()"/>
                </div>
            </form>

            <div class="bui-box-align-justify quick-link">
               <a class="bui-btn no-border" href="login/forget.html" >忘记密码？</a>
               <a class="bui-btn no-border"  href="login/register.html" >快速注册</a>
            </div>
        </main>
    </div>
<script>
    function login1() {
        let loginForm = $("#loginForm");
        if (!loginForm[0].checkValidity()) {
            return false;
        }
       myAjax({
            //几个参数需要注意一下
            method: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            data : loginForm.serialize(),
            url: "user/login" ,//url
            success: function (result) {
                window.location.replace("index.html");
            }
        })
    }

</script>
</body>
</html>
